<!DOCTYPE html>
<html lang="ch">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="css/swiper.min.css">		
		<script src="js/swiper.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<title></title>
	</head>

	<body>
		<div class="nav_con">
			<img class="nav_icon float_l" src="img/nav_icon_bar@2x.png">001
			<img class="nav_icon float_r" src="img/nav_icon_set@2x.png">
			<div class="clear"></div>
		</div>
		<div class="cd_nr">
			<div class="kzqxq_con">
				<div class="kzqxq_top">
					<p class="float_l kzqxq_nub">001</p>
					<div class="float_r kzqxq_dl">
						<img class="float_l kzqxq_icon_state" src="img/state_icon_day@2x.png">
						<img class="float_l kzqxq_quantity" src="img/icon_quantity@2x.png">
						<p class="kzqxq_quantity_nub  float_l">80%</p>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="kzqxq_mid">
					<p class="float_l kzqxq_dy">电压<span>AC220.0</span></p>
					<div class="kzqxq_mid_fen float_l"></div>
					<p class="float_l">控制器状态<span class="kzqxq_state">正常</span></p>
					<div class="clear"></div>
				</div>
				<p class="kzqxq_ad">位置<span>东经111-114北纬25-23</span></p>
			</div>
			<div class="conList_con">
				<div class="conList_title">
					<p class="conList_name float_l">障碍灯列表</p>
					<p class="float_l conList_tole">100</p>
					<img class="float_r" src="img/xmxq_sx.png" style="width: 18px;margin: 0 8px">
					<p class="float_r conList_tole_nub">99/<span>1</span></p>
					<div class="clear"></div>
				</div>
				<div class="conList_ser">
					<img class="conList_ser_icon float_r" src="img/icon_search@2x.png">
					<input class="float_l" placeholder="搜索项目">
					<div class="clear"></div>
				</div>
				<div class="conList_condition">
					<div class="conList_ping float_l">
						<div class="centered">
							<div class="conList_condition_name float_l">类型</div>
							<img class="float_l" src="img/icon_tiao.png" style="width: 8px; margin-left: 4px;margin-top: 14px">
							<div class="clear"></div>
						</div>
					</div>
					<div class="conList_ping float_l">
						<div class="centered">
							<div class="conList_condition_name float_l">状态</div>
							<img class="float_l" src="img/icon_tiao.png" style="width: 8px; margin-left: 4px;margin-top: 14px">
							<div class="clear"></div>
						</div>
					</div>
					<div class="conList_ping float_l">
						<div class="centered">
							<div class="conList_condition_name float_l">工作方式</div>
							<img class="float_l" src="img/icon_tiao.png" style="width: 8px; margin-left: 4px;margin-top: 14px">
							<div class="clear"></div>
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="conList">
					<P class="float_l conList_nub">001</P>
					<div class="conList_top float_r">
						<img class="conList_state_icon float_l" src="img/icon_lihgt.png">
						<p class="conList_voltage float_l">220v </p>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
					<p class="float_l conList_det">远程配置闪光持续时间</p>
					<p class="float_r conList_state">正常</p>
					<div class="clear"></div>
					<div class="light_del">
						<p class="float_l">闪光频率  20</p>
						<p class="light_del_fen float_l">闪光起始点  100</p>
						<p class="float_l">闪光频率  1000</p>
						<div class="clear"></div>
					</div>
				</div>
				<div class="conList">
					<P class="float_l conList_nub">001</P>
					<div class="conList_top float_r">
						<img class="conList_state_icon float_l" src="img/icon_lihgt.png">
						<p class="conList_voltage float_l">220v </p>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
					<p class="float_l conList_det">远程配置闪光持续时间</p>
					<p class="float_r conList_state">正常</p>
					<div class="clear"></div>
				</div>
				<div class="conList" style="background: #e4e4e4;">
					<P class="float_l conList_nub">001</P>
					<div class="conList_top float_r">
						<img class="conList_state_icon float_l" src="img/state_icon_night_off@2x.png">
						<p class="conList_voltage float_l">220v </p>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
					<p class="float_l conList_det">远程配置闪光持续时间</p>
					<p class="float_r conList_state">正常</p>
					<div class="clear"></div>
				</div>
				<div class="conList">
					<P class="float_l conList_nub">001</P>
					<div class="conList_top float_r">
						<img class="conList_state_icon float_l" src="img/icon_lihgt.png">
						<p class="conList_voltage float_l">220v </p>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
					<p class="float_l conList_det">远程配置闪光持续时间</p>
					<p class="float_r conList_state">正常</p>
					<div class="clear"></div>
				</div>
				<div class="conList">
					<P class="float_l conList_nub">001</P>
					<div class="conList_top float_r">
						<img class="conList_state_icon float_l" src="img/icon_lihgt.png">
						<p class="conList_voltage float_l">220v </p>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
					<p class="float_l conList_det">远程配置闪光持续时间</p>
					<p class="float_r conList_state">正常</p>
					<div class="clear"></div>
				</div>
			</div>
			<script>
				var mySwiper = new Swiper('.swiper-container', {
					direction: 'horizontal', // 垂直切换选项
					loop: true, // 循环模式选项
					roundLengths: true,
					slidesPerView: "auto",
					centeredSlides: true,
					autoplay: {
						delay: 1700,
					},

					// 如果需要分页器
					pagination: {
						el: '.swiper-pagination',
					},

					// 如果需要前进后退按钮
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},

					// 如果需要滚动条
					scrollbar: {
						el: '.swiper-scrollbar',
					},
				})
				var mySwiper = new Swiper('.swiper-con', {
					direction: 'horizontal', // 垂直切换选项
					loop: true, // 循环模式选项

					// 如果需要分页器
					pagination: {
						el: '.swiper-pagination',
					},

					// 如果需要前进后退按钮
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},

					// 如果需要滚动条
					scrollbar: {
						el: '.swiper-scrollbar',
					},
				})
			</script>
		</div>

	</body>

</html>